
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/include/taglibs.jsp" %>
<html>
<head>
    <%@include file="/include/header.html" %>
    <script type="text/javascript" src="${ctx}/appjs/elec/elecPileMonitor.js"></script>
    <link rel="stylesheet" href="${ctx}/statics/css/update.css?v=20200825">
    <link rel="stylesheet" href="${ctx}/statics/css/common.css?v=20200825">
    <link rel="stylesheet" href="${ctx}/libjs/plugins/bootstrap-table-pagejump/bootstrap-table-pagejump.css">
    <script src="${ctx}/libjs/plugins/bootstrap-table-pagejump/bootstrap-table-pagejump.js"></script>
    <link rel="stylesheet" href="${ctx}/libjs/plugins/bootStrap-table-fixed-column/bootstrap-table-fixed-columns.css">
    <script src="${ctx}/libjs/plugins/bootStrap-table-fixed-column/bootstrap-table-fixed-columns.js"></script>
<%--    画图--%>
    <script src="${ctx}/libjs/plugins/bootStrap-table-fixed-column/bootstrap-table-fixed-columns.js"></script>

    <script src="${ctx}/libjs/plugins/highcharts/highcharts.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/exporting.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/series-label.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/oldie.js"></script>
    <script src="${ctx}/libjs/plugins/highcharts/highcharts-zh_CN.js"></script>

    <link href="${ctx}/libjs/plugins/bootstrap-select/bootstrap-select.min.css" rel="stylesheet">
    <script type="text/javascript" src="${ctx}/appjs/market/marketActivity.js"></script>
    <script type="text/javascript" src="${ctx}/libjs/plugins/bootstrap-select/bootstrap-select.js"></script>
    <link href="${ctx}/libjs/plugins/bootstrap/css/min30.css" rel="stylesheet">
    <style>
        .bootstrap-table .fixed-table-container .table thead th .th-inner {
            text-align: center !important;
        }
    </style>
</head>

<script type="text/javascript">
    $('#topLink', window.parent.document).html(function (i, origText) {
        return '<ol class="breadcrumb">' +
            '<li class="breadcrumb-item">' +
            '<a href="">主页</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a>充电桩运行监控</a>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<strong>在线监控</strong>' +
            '</li>' +
            '<li class="breadcrumb-item">' +
            '<a href="javascript:window.history.back();javascript:window.location.reload()"><i class="fa fa-times"></i> 返回</a>' +
            '</li>' +
            '</ol>';
    });

    var has_add = '';
    var has_edit = '';
    var has_delete = '';
    var StationManager_pile_update = false;
    var StationManager_pile_look = false;
    var siteId =<%=session.getAttribute("stationNo") %>;
    var pileMonitortype=0;
</script>

<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div class="row">
                    <shiro:hasPermission name="StationManager_pile_reload">
                        <input id="stationName" name="stationName" type="text" class="form-control longInput"
                               placeholder="请输入所属站点" >
                        <input id="pileNo" name="pileNo" type="text" class="form-control longInput input-distance"
                               placeholder="请输入电桩编号">

                        <input id="pileName" name="pileName" type="text" class="form-control longInput"
                               placeholder="设备编号">

                        <select type="text" class="form-control shortInput input-distance" name="status"
                                id="status">
                            <option value="">设备状态</option>
                            <option value="0">空闲</option>
                            <option value="2">已插枪</option>
                            <option value="10">启动中</option>
                            <option value="1">充电中</option>
                            <option value="10">已结束</option>
                            <option value="3">故障</option>
                            <option value="4">离线</option>
                        </select>
                        <button class="btn btn-success input-distance" onclick="pile.reLoad()">查询</button>
                        <div class="pull-left search fr">
                            <button class="btn btn-success exportBtn" style="margin-left: 20px;" onclick="pile.exportInfo()">导出</button>
                        </div>
                    </shiro:hasPermission>
                </div>

                <table id="exampleTable" data-mobile-responsive="true">
                </table>
            </div>
        </div>
    </div>

    <div class="col-sm-12">
        <div class="ibox" STYLE="background-color: #ffffff;">
            <div class="ibox-body">
               <p style="color: #278CED !important;margin-left: 0.3rem;display: inline-block;height: 0.29rem;line-height: 0.29rem; font-size: 20px;">站点统计</p>
                <div class="form-group row" style=" position: relative;">
                    <label class="col-sm-3 col-formlabel text-right" style="font-size: 16px"> 站点列表 </label>
                    <select id="id_select" class="selectpicker  show-tick form-contro"  data-live-search="true" style="font-size: 14px; width:2rem ">
                        <c:forEach items="${elecStationList}" var="elecStationList">
                            <option value="${elecStationList.stationNo}">${elecStationList.stationName}</option>
                        </c:forEach>
                    </select>
                    <button class="btn btn-success input-distance" onclick="getStatisticsChart()">搜索</button>
                    <div class="btn-group" style="position: absolute; right:0.3rem;" >
                        <button type="button" class="btn btn-primary" onclick="getStatistics(siteId,0);">按日</button>
                        <button type="button" class="btn btn-primary" onclick="getStatistics(siteId,1);">按月</button>
                    </div>
                </div>
                <div id="container" style="max-width: 800px; height: 400px;  margin: 0 auto; overflow: hidden;" data-highcharts-chart="0">
                </div>
            </div>
        </div>
    </div>

</div>
<div class="panel-body">
    <div id="qrcode"></div>
</div>
<shiro:hasPermission name="StationManager_pile_look">
    <script>
        StationManager_pile_look = true;
    </script>
</shiro:hasPermission>
<shiro:hasPermission name="StationManager_pile_update">
    <script>
        StationManager_pile_update = true;
    </script>
</shiro:hasPermission>
<script type="text/javascript">
    pile.init();
</script>
</body>
</html>
<script type="text/javascript">
    //获取
    function getStatistics(siteId,type) {
        pileMonitortype =type;
        var isdata= [];
        var totalPower= [];
        var elecMoney= [];
        var  serviceMoney= [];
        var orderCount= [];
        var payAmount= [];
        $.ajax({
            "type": "get",
            "url": "${ctx}/pileMonitor/listPageLintChart?stationNo="+siteId+"&type="+type,
            "data": {},
            "success": function (data) {
                console.log(data)
                if(data.status==200){
                    for (var i = 0; i < data.data.length; i++) {
                        if(type==0){
                            isdata.push(data.data[i].days);
                        }else{
                            isdata.push(data.data[i].months);
                        }
                        payAmount.push(data.data[i].payAmount);
                        totalPower.push(data.data[i].totalPower);
                        elecMoney.push(data.data[i].elecMoney);
                        serviceMoney.push(data.data[i].serviceMoney);
                        orderCount.push(data.data[i].orderCount);
                    }
                    isShowtj(isdata,payAmount,totalPower,elecMoney,serviceMoney,orderCount);
                }else{
                    alert("站点查询失败！");
                }

            }
        })
    }


    $(function () {
        $('#operateStatus').searchableSelect();
    })
    //搜索获取页面
    function getStatisticsChart(){
        siteId=  $("#id_select").selectpicker('val');
        if (siteId != '00000000') {
            getStatistics(siteId,pileMonitortype);
        }

    }

    getStatistics(siteId,pileMonitortype);
    function isShowtj(isdata,payAmount,totalPower,elecMoney,serviceMoney,orderCount) {
        var chart = Highcharts.chart('container', {
            title: {
                text: '站点统计'
            },
            subtitle: {
                text: ''
            },
            yAxis: {
                title: {
                    text: ''
                }
            },
            credits: {
                text: '瑞晨充电',
                href: '/'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            xAxis: {
                categories: isdata
            },

            series: [{
                name: '营业额',
                data: payAmount
            }, {
                name: '充电量',
                data: totalPower
            }, {
                name: '电费',
                data: elecMoney
            }, {
                name: '服务费',
                data: serviceMoney
            }, {
                name: '充电次数',
                data: orderCount
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
    }
</script>
<style>
    #id_select{ font-size: 14px;}
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 2rem;
    }
</style>


